<!-- classes -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'classes',
          name: 'Yi school',
        },
        {
          routeName: 'classes',
          name: 'classes',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="classes">
      <template v-slot:left>
        <div class="createBtnBox">
          <gg-create-button @click="createClass" label="Create class" />
        </div>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <div class="content">
        <ul class="content-ul">
          <li class="item">
            <div class="item-top">
              <p class="class-name">{{ className }}</p>
              <p class="class-romm">Room：2A</p>
            </div>
            <div class="item-bottom">
              <div class="sub-item">
                <span class="label">Level</span
                ><span class="value">Preschool</span>
              </div>
              <div class="sub-item">
                <span class="label">Subject</span
                ><span class="value">Chinese</span>
              </div>
              <div class="sub-item">
                <span class="label">Subject</span
                ><span class="value">Chinese</span>
              </div>
              <div class="sub-item">
                <span class="label">Year</span><span class="value">2020</span>
              </div>
            </div>
            <div class="menu-bar-right">
              <gg-menu-bar>
                <i class="iconmore_vert-24px iconfont" />
                <template slot="menus">
                  <gg-menu-bar-item
                    v-for="item in menuBarData"
                    @click="menuClick(item.key, className)"
                    :key="item.key"
                    :class="{ disabled: item.disabled }"
                    >{{ item.key }}</gg-menu-bar-item
                  >
                </template>
              </gg-menu-bar>
            </div>
          </li>
        </ul>
      </div>
      <BaseFormDialog
        v-model="isShowBaseFormDialog"
        title="Create new class"
        :data="dialogClassData"
        @submit="handleAddClass"
        textReminder="* indicates a required field"
        :renderPass="renderPass"
      >
        <template slot="renderHtml" slot-scope="scope">
          <baseGGSelect
            v-if="scope.data.key == 'level'"
            v-model="scope.data.value"
            ref="level"
            :placeholder="scope.data.placeholder"
          >
            <md-option
              v-for="(item, index) in scope.data.label"
              :value="item"
              :key="index"
            >
              {{ item }}
            </md-option>
          </baseGGSelect>
          <baseGGSelect
            v-else-if="scope.data.key == 'subject'"
            v-model="scope.data.value"
            ref="subject"
            :placeholder="scope.data.placeholder"
          >
            <md-option
              v-for="(item, index) in scope.data.label"
              :value="item"
              :key="index"
            >
              {{ item }}
            </md-option>
          </baseGGSelect>
          <baseGGSelect
            v-else-if="scope.data.key == 'year'"
            v-model="scope.data.value"
            ref="year"
            :placeholder="scope.data.placeholder"
          >
            <md-option
              v-for="(item, index) in scope.data.label"
              :value="item"
              :key="index"
            >
              {{ item }}
            </md-option>
          </baseGGSelect>
          <baseGGSelect
            v-else-if="scope.data.key == 'room'"
            v-model="scope.data.value"
            ref="room"
            :placeholder="scope.data.placeholder"
          >
            <md-option
              v-for="(item, index) in scope.data.label"
              :value="item"
              :key="index"
            >
              {{ item }}
            </md-option>
          </baseGGSelect>
        </template>
      </BaseFormDialog>
    </GgPage>
    <Snackbar
      :visible.sync="isSnackbarShow"
      content="Class has been moved to closed"
    />
  </div>
</template>

<script>
export default {
  name: "classes",
  data() {
    return {
      className: "NB-2",
      menuDatas: [
        { name: "Active", key: "Active" },
        { name: "Closed", key: "Closed" },
      ],
      activeIndex: "CLASSES",
      menuBarData: [
        { key: "Upload photo", disabled: false },
        { key: "Close", disabled: false },
        { key: "Edit", disabled: false },
        { key: "Delete", disabled: true },
      ],
      isShowBaseFormDialog: false,
      renderPass: false,
      dialogClassData: [
        {
          placeholder: "Class name *",
          key: "name",
          value: "",
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "Level",
          key: "level",
          float: true,
          value: "",
          label: ["Preschool", "English", "Maths", "Chinese"],
          renderHtml: true,
        },
        {
          placeholder: "Subject",
          key: "subject",
          float: true,
          value: "",
          label: ["Mixed", "English", "Maths", "Chinese"],
          renderHtml: true,
        },
        {
          placeholder: "Section",
          key: "section",
          value: "",
        },
        {
          placeholder: "Year",
          key: "year",
          float: true,
          value: "",
          label: ["2020", "2019", "2018", "2017"],
          renderHtml: true,
        },
        {
          placeholder: "Room",
          key: "room",
          value: "",
        },
      ],
      slotData: ["level", "subject", "year"],
      isSnackbarShow: false,
    };
  },
  watch: {
    dialogClassData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          let aaa = this.slotData.every((item) => !!this.$refs[item].value);
          this.renderPass = aaa;
          console.log("renderPass:", this.renderPass);
        });
      },
    },
  },
  methods: {
    menuSelect(key, item) {
      console.log(key, item);
      this.activeIndex = key;
    },
    menuClick(item) {
      this.$emit("menuCallback", item);
      if (item == "Edit") {
        this.$router.push(`/classDetail/${this.className}`);
      }
    },
    createClass() {},
    handleAddClass() {
      this.openMessageBox();
    },
    openMessageBox() {
      this.$confirm(
        "Once the class is closed, you will not be able to operate the class for students in this class unless you restore it.",
        "Close class",
        {
          cancelButtonText: "Cancel",
          confirmButtonText: "Close",
          cancelButtonClass: "gg_cancel_button",
          confirmButtonClass: "gg_submit_button",
          customClass: "gg_confirm",
        }
      ).then(() => {
        this.handleSuspend();
      });
    },
    handleSuspend() {
      this.isSnackbarShow = true;
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.content {
  .content-ul {
    li {
      width: 328px;
      height: 264px;
    }
    .item {
      position: relative;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      .item-top {
        padding: 25px 16px;
        background: #ffc08e url("~@/assets/images/classes/class_bg1.jpg")
          no-repeat;
        background-size: 328px auto;
        height: 136px;
        color: #fff;
        .class-name {
          padding-bottom: 12px;
          font-family: OpenSans-Bold;
          font-size: 35px;
        }
        .class-room {
          font-family: Roboto-medium;
          font-size: 16px;
        }
      }
      .item-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 21px 16px;
        font-family: Roboto-medium;
        font-size: 12px;
        color: #202124;

        .sub-item {
          width: 50%;
          padding-bottom: 12px;
          .label {
            display: inline-block;
            width: 60px;
          }
          .value {
            font-family: Roboto;
          }
        }
      }
      .menu-bar-right {
        position: absolute;
        right: 12px;
        bottom: 20px;
      }
    }
  }
}
</style>